import $ from './library/jquery.js';
import cookie from './library/cookie.js';
import querystring from './library/querystring.js';

let shop = cookie.get('shop');
if (shop) {

    shop = JSON.parse(shop);  // 获取名字为shop的cookie，JSON字符串并且转换为对象

    let idList = shop.map(el => el.id).join(); // 遍历数组 拿出id值

    $.ajax({
        type: "get",
        url: "../../interface/getItems.php",
        data: { idList },
        dataType: "json",
    }).then(function (res) {

        console.log(res);

        let tempString = "";
        res.forEach(el => {
            let descripe = JSON.parse(el.descripe);

            // 让ajax请求数据结果遍历的id与cookie中相应的id相同 才可以填写数据
            let current = shop.filter(elm => elm.id === el.id);


            tempString += `
            <div class="main3-wrapper">
                    <div class="main3-l">
                        <div>
                            <input type="checkbox" name="" id="">
                        </div>
                        <div>
                            <img src="${descripe[0].src}" alt="">
                        </div>
                    </div>
                    <div class="main3-r">
                        <div class="main3-r-1">
                            <div class="shop-title">
                                <p>${el.title}</p>
                                <span>赠品|OPPO 半入耳式耳机 Type-C接口</span>
                            </div>

                            <div class="shop-d">
                                <div>¥${parseFloat(el.price).toFixed(2)}</div>

                                <div>
                                    <button>-</button>
                                    <input type="num" min="1" max="10" value="${current[0].num}" class="shop-num">
                                    <button>+</button>
                                    <p>限购10件</p>
                                </div>

                                <div class="shop-sumprice">¥${(current[0].num * parseFloat(el.price)).toFixed(2)}</div>
                                
                                <div>
                                    <div class="removeitem" data-id="${el.id}">删除商品</div>
                                    <div>修改商品</div>
                                </div>
                            </div>
                        </div>

                        <div class="main3-r-2">
                            <div>
                                <span>赠品</span>
                                <img src="../imgs/list1-12.png" alt="">
                                <div>OPPO 半入耳式耳机 Type-C接口</div>
                            </div>
                            <div>¥0</div>
                            <div>x1</div>
                        </div>

                    </div>
                </div>`

            $('.main3').html(tempString).find('.removeitem').on('click', function() {
                let res = shop.filter(el => el.id !== $(this).attr('data-id'));
                cookie.set('shop', JSON.stringify(res), 1);
                location.reload();
            });;

        });

        // 购物车数据添加
    }).catch(function (xhr) {
        console.log(xhr.status);
    });
}